<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            margin: 0 auto;
            box-sizing: border-box;
            display: flex;
            width: 590px;
            height: 470px;
            position: relative;
        }

        ul {
            list-style: none;
        }

        .img-list {
            z-index: -1;
            position: relative;
            width: 100%;
            height: 100%;
        }

        .img-list li {
            opacity: 0;
            position: absolute;
            width: 100%;
            height: 100%;
            transition: linear .3s;
        }

        li.active {
            opacity: 1;
        }

        .circle-list {
            position: absolute;
            top: 90%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            list-style: none;
        }

        .circle-list li {
            z-index: 1;
            display: flex;
            width: 15px;
            height: 15px;
            margin: 3px;
            border-radius: 50%;
            cursor: pointer;
            border: 2px solid transparent;
            box-sizing: border-box;
            background: rgba(255, 255, 255, .4);
        }

        .circle-list li.active {
            background: #fff;
            border: 2px solid rgba(0, 0, 0, .3);
        }

        .prev-btn {
            top: 50%;
            flex-direction: column;
            position: absolute;
            display: flex;
            align-items: center;
            width: 25px;
            text-align: center;
            line-height: 35px;
            height: 35px;
            opacity: 0.3;
            border-radius: 0 17.5px 17.5px 0;
            transform: translate(0, -50%);
            background-color: black;
            color: #fff;
        }

        .next-btn {
            right: 0;
            top: 50%;
            flex-direction: column;
            position: absolute;
            display: flex;
            align-items: center;
            width: 25px;
            text-align: center;
            line-height: 35px;
            height: 35px;
            opacity: 0.3;
            border-radius: 17.5px 0 0 17.5px;
            transform: translate(0, -50%);
            background-color: black;
            color: #fff;
        }

        .prev-btn:hover {
            opacity: 0.6;
        }

        .next-btn:hover {
            opacity: 0.6;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="prev-btn iconfont iconzuojiantou-copy"></div>
        <ul class="img-list">
            <li class="active"><img src="./image/1.jpg" alt=""></li>
            <li><img src="./image/2.jpg" alt=""></li>
            <li><img src="./image/3.jpg" alt=""></li>
            <li><img src="./image/4.jpg" alt=""></li>
            <li><img src="./image/5.jpg" alt=""></li>
            <li><img src="./image/6.jpg" alt=""></li>
        </ul>
        <ul class="circle-list">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div class="next-btn iconfont iconarrow-right"></div>
    </div>
    <script>
        var imgIndex = 0
        var prevBtn = document.getElementsByClassName('prev-btn')[0]
        var nextBtn = document.getElementsByClassName('next-btn')[0]
        var circleBtns = document.querySelectorAll('.circle-list li')

        prevBtn.onclick = function () {
            if (imgIndex === 0) {
                imgIndex = 5
            } else {
                imgIndex -= 1
            }

            changeActive(imgIndex)
        }

        nextBtn.onclick = function () {
            if (imgIndex === 5) {
                imgIndex = 0
            } else {
                imgIndex += 1
            }

            changeActive(imgIndex)
        }

        circleBtns.forEach(function (item, index) {

            item.onclick = function (e) {
                changeActive(index)
            }
        })

        function changeActive(index) {
            var lis = document.querySelectorAll('.img-list li')

            lis.forEach(function (item) {
                item.className = ''
            })

            lis[index].className = 'active'

            circleBtns.forEach(function (item) {
                item.className = ''
            })

            circleBtns[index].className = 'active'
        }
    </script>
</body>

</html>